import React from 'react';
import { Tooltip } from 'antd';
import { QuestionCircleOutlined } from '#/utils/antdIcons.js';
import styles from './index.less';

/**
 * 标题玩意儿
 */
export default ({ name = '', unit = '', tooltip = '', right }) => {
  return (
    <div className={styles.head}>
      <div className={styles.title}>
        <div className={styles.title_name}>{name}</div>
        {unit && <div className={styles.title_unit}>{unit}</div>}
        {tooltip && (
          <Tooltip overlayClassName="overtoop" title={tooltip}>
            <QuestionCircleOutlined
              style={{
                fontSize: 14,
                color: '#FF5959',
                margin: '4px 0 0 8px',
              }}
            />
          </Tooltip>
        )}
      </div>
      {right && <div className={styles.right}>{right}</div>}
    </div>
  );
};
